<template>
	<view class="m-form">
		<u-form
			:labelPosition="labelPosition"
			:model="model"
			:rules="rules"
			ref="form1"
			:labelWidth="labelWidth"
			:borderBottom="false"
			:class="[classes]"
			 errorType="toast"
			>
			
			<u-form-item
					:label="item.label"
					:prop="item.tag"
					:ref="item.tag"
					:class="[item.classes]"
					v-for="(item,index) in formList" :key="index"
					:required="item.required"
					:borderBottom="item.borderBottom"
			>
				<template v-if="item.txt" >
					<view class="c999 fz26">提示：请先输入<text class="c26">邮箱验证</text>，如邮箱验证失败，将自动为您切换为手机验证</view>
				</template>
				<template v-else-if="item.errorMsg">
					<view @click="clickBtn(item)"  class="ce8 fz26" :style="item.style">{{item.text}}</view>
				</template>
				<template v-else-if="item.tips" >
					<view class="flex-center flexdc " style="width: 100%;height: 70px;justify-content: space-between;margin-top: 40px;margin-bottom: 20px;">
						<u-icon :name="item.icon" :color="item.color" :size="item.size"></u-icon>
						<view class="" :style="{color:item.color,marginTop:'30px'}">
							{{item.text}}
						</view>
					</view>
				</template>
				<template v-else-if="item.agree">
					<m-agree @changeAgree="changeAgree"></m-agree>
				</template>
				<template v-else-if="item.button">
					<u-button :type="item.type" @click="clickBtn(item)"
					:loading="item.loading"
					:style="item.btnStyle">{{item.btn}}</u-button>
				</template>
				<template v-else-if="item.buttonTwo">
					<u-button 
					v-for="(el,i) in item.btnList" :key="el.text"
					:type="el.type" 
					@click="clickBtn(el)"
					:loading="el.loading"
					:style="el.btnStyle">{{el.btn}}</u-button>
				</template>
				<template v-else-if="item.uploadCard">
					<view class="flex-between-wrap">
						<view class="upload-box flex-center flexdc alic">
							<m-uploadcustomer cmd="/api/app/user/update_id_card_face" @cb="(url)=>{ setImgUrl(url,'cardFace') }">
								<view class="upload-box-image flex-center flexdc alic" v-if="!model.cardFace">
									<u-image width="56" height="56" 
									:src="'/static/images/setting/carmare.png'"></u-image>
									<text class="c26" style="margin-top: 12px;">大小不超过2MB(jpg/png)</text>
								</view>
								<view class="flex-center flexdc alic" v-else>
									<u-image width="206" height="125"
									:src="model.cardFace"></u-image>
								</view>
							</m-uploadcustomer>
							<text class="upload-box-text c999">身份证正面</text>
						</view>
						<view class="upload-box flex-center flexdc alic">
							<m-uploadcustomer cmd="/api/app/user/update_id_card_back"  @cb="(url)=>{ setImgUrl(url,'cardBack') }">
								<view class="upload-box-image upload-box-image2 flex-center flexdc alic" v-if="!model.cardBack">
									<u-image width="56" height="56" 
									:src="model.cardBack || '/static/images/setting/carmare.png'"></u-image>
									<text class="c26" style="margin-top: 12px;">大小不超过2MB(jpg/png)</text>
								</view>
								<view class="flex-center flexdc alic" v-else>
									<u-image width="206" height="125"
									:src="model.cardBack"></u-image>
								</view>
							</m-uploadcustomer>
							<text class="upload-box-text c999">身份证反面</text>
						</view>
					</view>
					
				</template>
				<template v-else-if="item.textarea">
					<u-textarea
					@input="inputTextarea"
					v-model.trim="model[item.tag]"
					:placeholder="item.placeholder" 
					:maxlength="item.max"
					:autoHeight="item.autoHeight "
					:key="item.tag"
					count ></u-textarea>
				</template>
				<template v-else>
					<u-input
							@input="inputTextarea"
							:maxlength="item.max"
							v-model.trim="model[item.tag]"
							:type="item.type"
							:rightIcon="item.icon"
							:placeholder="item.placeholder"
							border="none"
							:key="item.tag"
							:disabled="item.disabled"
					></u-input>
					<template solt="right">
						<view class="" v-if="item.icon=='eyes'" @click="checkPwdType(item,index)">
							<u-image v-if="item.type == 'password'" src="/static/images/login/close-eyes.png" mode="widthFix" width="12" height="12"></u-image>
							<u-image v-else src="/static/images/login/open-eyes.png" mode="widthFix" width="12" height="12"></u-image>
						</view>
						<view class="" v-if="item.icon=='send'" >
							<u-button type="text" :disabled="codeData[item.ptag].disabled" 
							:style="{color:'#26bbff', height:'auto',fontSize:'14px',padding:'2px',width:'88px', letterSpacing:'1px', posation:'absolute',right:(isMobile || item.isMobile)?0:'-95px'}" @click="sendMessage(item)">
								 {{!codeData[item.ptag].disabled?item.text:(codeData[item.ptag].time +'S')}}
							</u-button>
						</view>
						<view v-if="item.count" class="count-box">
							{{model[item.tag]?model[item.tag].length:0}}/{{item.max}}
						</view>
					</template>
				</template>
			</u-form-item>
		</u-form>
	</view>
</template>

<script>
	export default {
		name:"m-form",
		props:{
			labelPosition:{
				type:String,
				default:'top'
			},
			classes:{
				type:String,
				default:''
			},
			labelWidth:{
				type:Number,
				default:200
			},
			list:{
				type:Array,
				default:()=>[]
			}
		},
		data() {
			return {
				model: {
				},
				isAgree:false,
				rules:{},
				formList:[
					
				],
				codeObj:{
					time:60,
					disabled:false,
					count: 1,
					timer:null,
				},
				codeData:{},
				uploadInfo:{
					
				}
			};
		},
		watch:{
			list(val){
				debugger
				this.setFormList()
			},
		},
		mounted(){
			this.setFormList()
		},
		methods: {
			setFormList(){
				this.model = {}
				this.formList = JSON.parse(JSON.stringify(this.list))
				this.formList.map(item => {
					 if(item.rules){
						this.rules[item.tag] = item.rules
					 }
					 if(item.tag){
						 this.model[item.tag] = item.value || ''
					 }
					 if(item.icon == 'send'){
						 this.codeData[item.ptag] =this.codeData[item.ptag] || JSON.parse(JSON.stringify( this.codeObj))
						 console.log(this.codeData)
					 1}
					
				})
				console.log(this.model)
				this.changeAgree(this.isAgree?['agree']:[])
				//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
				this.$refs.form1.setRules(this.rules)
				let _this = this;
			},
			inputTextarea(e){
				this.$forceUpdate()
			},
			setImgUrl(img,tag){
				this.model[tag] = img
				this.$forceUpdate()
				
			},
			changeAgree(val){
				this.isAgree = val.length?true:false
				this.formList.some((item,i) => {
					if(item.submit){
						item.disabled = !val.length
						this.formList.splice(i,1,item)
						return true
					}
				})
			},
			checkPwdType(item,index){
				item.type = item.type == 'password'?'input':'password'
				this.formList.splice(index,1,item)
			},
			extendFunc(item){
				
				this.$emit('extendFunc',item)
			},
			clickBtn(item){
				debugger
				
				if(item.disabled && this.model.hasOwnProperty('aggree')){
					if(item.func == 'submit'){
						uni.showToast({
							title:'请勾选同意协议后再进行操作',
							icon:'none',
						})
					}
				}else{
					if(item.func == 'submit'){
						item.loading = true;
						setTimeout(()=>{
							item.loading = false;
						},1500)
					}
					if(item.func){
						this[item.func](item)
					}
				}
				
			},
			submit(item){
				this.$refs.form1.validate().then(res => {
					if (res) {
						if(this.model.hasOwnProperty('password2')&& this.model.password != this.model.password2){
							uni.showToast({
								title:'两次密码不一致，请检查重新填写!',
								icon:'none',
							})
							return 
						}
						if(this.model.hasOwnProperty('id_card_number')){
							if(!this.model.cardFace){
								uni.showToast({
									title:'请上传身份证正面!',
									icon:'none',
								})
								return
							}
							if(!this.model.cardBack){
								uni.showToast({
									title:'请上传身份证反面!',
									icon:'none',
								})
								return 
							}
						}
						
						this.$emit('submit',this.model)
						console.log('验证通过');
					} else {
						console.log('验证失败');
						item.loading = false;
					}
				})
			},
			goBack(item){
				if(item.login){
					this.utils.goPath('/pages/login/login',{},'redirectTo')
				}else{
					this.utils.goBack()
				}
				
			},
			getCapache(item){
				return new Promise(resolve => {
					let par = {
						"request_type": item.request_type, // 固定值，必传
					}
					if(item.type == 'email'){
						par.email = this.model[item.ptag]
					
					}else{
						par.phone = this.model[item.ptag]
					}
					this.$api[item.cmd || 'send_email_code'](par).then(res => {
						if(res.code == 200 ){
							resolve(true)
							uni.showToast({
								title:item.text+'成功!',
								icon:'none',
							})
						}else{
							resolve(false)
							uni.showToast({
								title:res.message,
								icon:'none',
							})
						}
					})
				})
				
			},
			sendMessage(item) {
				debugger
				if(!uni.$u.test[item.type](this.model[item.ptag])){
					uni.showToast({
						title:item.message || item.type =='phone'?'请填写正确的手机号码':'请填写正确的邮箱',
						icon:'none',
					})
					return 
				}else{
					this.getCapache(item).then(res => { // cmd 可配置
						if(res){
							let codeObj = this.codeData[item.ptag]
							let time = codeObj.time * 1
							// * this.codeObj.count;
							this.codeData[item.ptag].timer = setInterval(() => {
								if(time <= 1 ){
								  time = 60;
								  this.codeData[item.ptag].disabled = false;
								  clearInterval(this.codeData[item.ptag].timer)
								}else{
								  time--;
								  this.codeData[item.ptag].disabled = true;
								}
								this.codeData[item.ptag].time = time;
								this.$forceUpdate()
							}, 1000);
						}
					})
					
					// uni.setStorageSync('sendCount',this.codeObj.count)
					// this.codeObj.count = this.codeObj.count+=1
				}
				  
			}
		},
	}
</script>

<style lang="scss" scoped>
	.m-form{
		margin-top: 20rpx;
		.ptb20{
			padding: 20rpx 0;
		}
		.pt50{
			padding-top: 50rpx;
		}
		.pb70{
			padding-bottom: 70rpx;
		}
		.noBorder{
			
			/deep/.u-form-item__body__right{
				border:none;
				
			}
			/deep/.u-form-item__body{
				padding: 0;
			}
			/deep/.u-form-item__body__right__content__slot{
				padding: 10rpx 0rpx!important;
				// justify-content: center;
				
			}
			
			
		}
		.bgee{
			/deep/.u-form-item__body__right{
				background: #f8f8fa;
				
			}
		}
		/deep/.u-textarea{
			padding: 9px 0;
		}
		/deep/.u-form-item{
			.u-form-item__body__right{
				min-width: 252px;
			}
		}
		/deep/.u-form-item__body__left{
			align-items: center !important;
			// margin-bottom: 10px !important;
			.u-form-item__body__left__content__required{
				line-height: 34px;
			}
		}
		/deep/.u-form-item__body__right{
			border: 1px solid #ebebed;
			border-radius: 3rpx;
			
		}
		/deep/.u-form-item__body__right__content__slot{
			padding: 10rpx 15rpx;
			position: relative;
		}
		/deep/.count-box{
			position: absolute;
			right: -45px;
			color: #999;
		}
		/deep/.u-form-item__body__right__message{
			margin-left: 0!important;
		}
		/deep/.u-input--square{
			background: transparent !important;
		}
		
		
	}
	.wRight80{
		/deep/.u-form-item__body__left{
			margin-bottom: 0px !important;
			.u-form-item__body__left__content__required{
				// line-height: 20px;
			}
		}
		
	}
	.noBorder-flexstart{
		/deep/.u-form-item__body__left{
			align-items: flex-start !important;
		}
	}
	.wauto{
		/deep/.u-form-item__body__right{
			// flex: 1;
			flex: none;
			min-width: auto !important;
		}
		/deep/.u-form-item__body__left{
			align-items: flex-start !important;
			line-height: 34px;
		}
		/deep/.u-form-item__body__right__message{
			margin-left: 130px!important;
		}
	}
	.w100{
		/deep/.u-form-item__body__left{
			align-items: flex-start !important;
		}
		/deep/.u-form-item__body__right{
			flex: 1;
		}
	}
	.wauto4{
		/deep/.u-form-item__body__right{
			flex: none;
			min-width: auto !important;
		}
		/deep/.u-form-item__body__left{
			align-items: flex-start !important;
			line-height: 34px;
		}
		/deep/.u-form-item__body__right__message{
			margin-left: 80px !important;
		}
	}
	.w192{
		/deep/.u-form-item__body__right{
			width: 205px;
		}
	}
	
	.wauto2{
		/deep/.u-form-item__body__right{
			flex: none;
			min-width: auto !important;
		}
		/deep/.u-form-item__body__left__content__label{
			justify-content: flex-end!important;
		}
	}
	.w210{
		/deep/.u-form-item__body__right{
			width: 222px !important;
		}
		/deep/.u-form-item__body__left__content__label{
			justify-content: flex-end!important;
		}
	}
	.w145{
		width: 145px;
		margin-left: 80px;
		/deep/.u-form-item__body__right{
			flex: 1;
			min-width: auto !important;
		}
	}
	.w300{
		width: 400px;
		/deep/.u-form-item__body__right{
			min-width: 300px !important;
		}
	}
	.w500{
		width: 600px;
		/deep/.u-form-item__body__right{
			min-width: 300px !important;
		}
	}
	.ml80{
		margin-left: 80px;
	}
	.ml130{
		margin-left: 130px;
	}
	.upload-box{
		margin-right: 44px;
		&-image{
			border: 1px solid #e9e9e9;
			border-radius: 15px;
			overflow: hidden;
			width:206px ;
			height: 125px;
			background:url('../../static/images/setting/cardFront.png') no-repeat 0 0;
		}
		&-image2{
			background:url('../../static/images/setting/carkBack.png') no-repeat 0 0;
		}
		&-text{
			padding: 20px 0;
		}
		
	}
	@media screen and (min-width: 0px) and (max-width:1024px){
		.m-form{
			/deep/.u-form-item__body{
				padding: 10px 0 !important;
			}
			/deep/.u-form-item__body__left{
				.u-form-item__body__left__content__required{
					line-height: 1;
				}
			}
			
		}
		.w145{
			width: calc(100% - 80px);
		}
		.wRight80{
			/deep/.u-form-item__body__right{
				width: calc(100% - 80px);
				
			}
		}
		.wauto2{
			/deep/.u-form-item__body__left__content__label{
				justify-content: flex-start!important;
			}
		}
		.wauto{
			/deep/.u-form-item__body__right{
				flex: 1;
			}
		}
		.w108{
			/deep/ .u-input__content{
				flex:1;
				width: 100px;
			}
		}
	}
</style>